<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        @media screen and (min-width: 1871px) {
            .flexbar {width: 1630px;}
            .navi-bar-left {width: 264px;}
            .v1 {margin-right: 20px;margin-left: 20px;}
            .navi-bar-right {width: 290px;}
        }
        @media screen and (max-width: 1870px) {
            .flexbar {width: 1414px;}
            .navi-bar-left {width: 232px;}
            .v1 {margin-right: 20px;margin-left: 20px;}
            .navi-bar-right {width: 242px;}
        }
        @media screen and (max-width: 1654px) {
            .flexbar {width: 1200px;}
            .navi-bar-left {width: 200px;}
            .v1 {margin-right: 8px;margin-left: 8px;}
            .navi-bar-right {width: 220px;}
        }
        @media screen and (max-width: 1438px) {
            .flexbar {width: 1000px;}
            .v1 {margin-right: 8px;margin-left: 8px;}

        }
            
        /* 一、头部 */
        .header {
            height: 180px;
            background: url(banner.png) no-repeat center;
            background-size: cover;
            position: relative;     
            font: normal 400 14px/36px 雅黑;    
        }
            ul {
                margin-top: 10px;
                list-style: none;
                height: 36px;
                flex: none;
                float: left;
            }
            /* 1.头部小导航栏 */
            .mini-navi {
                height: 76px;
                background-image: linear-gradient(to top,rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
                display: flex;
                justify-content: space-between;
            }
            /* a.左侧 */
            .mini-navi-left {
                margin-left: 48px;
                width: 485px;
                flex: none;
            }
            .mini-navi #donghua {
                overflow: hidden;
            }
            .mini-navi-left li {
                float: left;
                margin-right: 12px;
            }
            .mini-navi-left .lunbo li {
                margin-right: 0px;
                float: none;
                text-align: center;
            }
            .phone {
                display: block;
                margin-top: 8px ;
            }
            .mini-navi-left li a {
                text-decoration: none;
                color: #ffffff;
            }
            .mini-navi .lunbo {
                margin: 0px;
                animation: kuanian 8s infinite ;
                animation-direction: normal;
                animation-timing-function: linear;
            }
            @keyframes kuanian {
                0% {
                    transform: translateY(0px);
                }
                40% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-36px);
                }
                90% {
                    transform: translateY(-36px);
                }
                100% {
                    transform: translateY(0px);
                }
            }
            /* b.中间搜索栏 */
            .mini-navi-middle {
                margin: 10px 10px 0 10px;
                position: relative;
                box-sizing: border-box;
                flex: 1;
                max-width: 500px;
                min-width: 170px;
                display: flex;
                justify-content: center;
            }
            .mini-navi-middle-search {
                box-sizing: border-box;
                width: 100%;
                position: relative
            }
            form {
                box-sizing: border-box;
                display: block;
                padding: 0 38px 0 16px;
                border: 1px solid rgba(red, green, blue, 0);
                background-color: #fff;
                border-radius: 3px;
                position: relative;
            } 

            .mini-navi-middle input[type="search"] {
                display: inline-block;
                box-sizing: border-box;
                overflow: hidden;
                background-color: transparent;
                width: 100%;
                border: none;
                height: 36px;
                outline: none;
            }
            .mini-navi-middle input[type="submit"] {
                width: 50px;
                height: 36px;
                border: none;
                border-radius: 3px;
                position: absolute;
                right: 0;
                top: 0;
                background-color: #e7e7e7;
                cursor: pointer;
                display: block;

            }
            
            /* c.右侧个人中心 */
            .mini-navi-right {
                margin-right: 24px;
                width: 446px;
                flex: none;
            }
            .mini-navi-right ul {
                float: right;
            }
            .mini-navi-right li {
                margin-left: 12px;
                float: right;
            }
            .mini-navi-right li a {
                text-decoration: none;
                color: #ffffff;
            }
            .mini-navi-right-usercenter input[type="submit"] {
                height: 36px;
                width: 100px;
                display: block;
                border: none;
                background-color: #ed709b;
                border-radius: 3px;
                color: #ffffff;
                cursor: pointer;
            }
            .mini-navi-right-usercenter .profile {
                height: 40px;
                width: 40px;
                margin-top: 10px;
                margin-right: 18px;
                border-radius: 50%;
                background: url(银子头.jpg) no-repeat center;
                background-size: cover;
            }
            .mini-navi-right-usercenter img {
                width: 40px;
                border: 0px solid #000;
                border-radius: 50%;
                float: right;
            }
            /* 导航条 */
            .flexbar {
                margin: 0 auto;
            }
            .navi-bar {
                height: 80px;
                width: 100%;
                min-width: 1000px;
                font: normal 400 14px 微软雅黑;
                display: flex;
                justify-content: center;
            }
            .navi-bar a {
                text-decoration: none;
                color: #212121;    
                text-align: center;
            /* 左侧 */

            }
            .navi-bar-left img {
                border: none;
                border-radius: 50%;
            }
            .navi-bar-left {
                box-sizing: border-box;
                height: 58px;
                margin-top: 21px;
                display: flex;          
            }
            .navi-bar-left a {
                display: block;
                width: 25%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
            .navi-bar-left a:hover span{
                color:#86c9e6
            }
            /* 分割线 */
            .v1 {
                margin-top: 32px;
                height: 48px;
                width: 1px;
                background-color: #e7e7e7;
            }
            /* 中间 */
            .navi-bar-middle {
                margin-top: 10px;
                height: 70px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-wrap: wrap;
                flex:1;
            }
            .navi-bar-middle .fenqu {
                height: 35px;
                display: flex;
                align-items: flex-end;
            }
            .fenqu a {
                white-space: nowrap;
            }
            .fenqu span {
                font: normal 400 14px 雅黑;
                color: #212121;
            }
            .fenqu i {
                display: inline-block;
                width: 32px;
                margin-left: 1px;
                text-align: center;
                border: none;
                border-radius: 2px;
                background-color: #86c9e6;
                color: #ffffff;
                font: normal 400 12px 微软雅黑;
                transform: scale(0.75);                
            } 
            .fenqu:hover span {
                color:#86c9e6
            }
            /* 右侧 */
            .navi-bar-right {
                height: 70px;
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                flex-shrink: 0;
            }
            .qita {
                display: flex;
            }
            .qita a{
                height: 35px;
                display: flex;
            }
            .navi-bar-right .qita img {
                padding-top: 12px;
                display: block;
                width: 20px;
                height: 23px;
            }
            .qita span {
                display: block;
                padding-top: 21px;
                margin-left: 6px;
                font: normal 400 14px/14px 微软雅黑;
                color: #212121;
            }
            .navi-bar-right .qita:hover span{
                color:#86c9e6
            }
            /* 热点 */
            .redian {
                height: 240px;
                margin: 0 auto;
                background-color: rgb(245, 140, 140);
            }


    </style>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header">
        <div class="mini-navi">
            <div class="mini-navi-left">
                <ul class="mini-navi-left-content">               
                    <li><a href="#">主站</a></li>
                    <li><a href="#">番剧</a></li>
                    <li><a href="#">游戏中心</a></li>
                    <li><a href="#">直播</a></li>
                    <li><a href="#">会员购</a></li>
                    <li><a href="#">漫画</a></li>
                    <li><a href="#">赛事</a></li>
                    <li id="donghua">
                        <ul class="lunbo">
                            <li><a href="#">跨晚</a></li>
                            <li><a href="#"><img src="kuanian.png" width="56px"></a></li>
                        </ul>
                    </li>
                    <li><img src="phone.png" class="phone" left center></li>
                    <li><a href="#">下载APP</a></li>
                </ul>
            </div>
            <div class="mini-navi-middle">
                <div class="mini-navi-middle-search">
                    <form id="search-form">
                        <input type="search" placeholder="请输入搜索内容">
                        <input type="submit" value="" >
                    </form>
                </div>


            </div>
            <div class="mini-navi-right">
                <ul class="mini-navi-right-usercenter"> 
                    <li><a href="#"><input type="submit" value="投稿"></a>
                    </li>
                    <li><a href="#">创作中心</a></li>
                    <li><a href="#">历史</a></li>
                    <li><a href="#">收藏</a></li>
                    <li><a href="#">动态</a></li>
                    <li><a href="#">消息</a></li>
                    <li><a href="#">大会员</a></li>
                    <li><a href="#"><img src="银子头.jpg"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 分区频道 -->
    <div class="flexbar">
        <div class="navi-bar">
            <!-- 左侧 -->
            <div class="navi-bar-left">
               <a href="" id="icon"><img src="首页.png"><span>首页</span>
               </a>
               <a href="" id="icon"><img src="动态.webp"><span>动态</span>
               </a>
               <a href="" id="icon"><img src="热门.png"><span>热门</span>
               </a>
               <a href="" id="icon"><img src="频道.webp"><span>频道</span>
               </a>
           </div> 
           <!-- 垂直分割线 -->
           <div class="v1"></div> 
           <!-- 中间 -->
           <div class="navi-bar-middle">    
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>动画<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>番剧<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>音乐<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>国创<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>舞蹈<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>游戏<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>知识<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>科技<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>生活<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>鬼畜<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>时尚<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>咨询<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>娱乐<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>影视<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>放映厅<i>999+</i></span>
                   </a>
               </div>
               <div class="fenqu">
                   <a href="#" class="fenqu-name"><span>更多<i>999+</i></span>
                   </a>
               </div>
           </div>   
           <!-- 垂直分割线 -->
           <div class="v1"></div>    
           <!-- 右侧 -->
           <div class="navi-bar-right">
               <div class="qita">
                   <a href="#"><img src="专栏.png" ><span>专栏</span>
                   </a>
               </div>
               <div class="qita">
                   <a href="#"><img src="活动.png" ><span>活动</span>
                   </a>
               </div>
               <div class="qita">
                   <a href="#"><img src="小黑屋.png" ><span>小黑屋</span>
                   </a>
               </div>
               <div class="qita">
                   <a href="#"><img src="直播.png" ><span>直播</span>
                   </a>
               </div>
               <div class="qita">
                   <a href="#"><img src="课堂.png" ><span>课堂</span>
                   </a>
               </div>
               <div class="qita">
                   <a href="#"><img src="新歌热榜.png" ><span>新歌热榜</span>
                   </a>
               </div>
        </div>         
   </div>   

    </div>

    <!-- 热点栏目 -->
    <div class="redian flexbar">

    </div>
</body>
</html>